/*
 * @Description: 元数据列表
 * @Author: Rfan
 * @Date: 2022-01-20 15:45:14
 * @LastEditTime: 2022-10-26 15:24:00
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space, Table, Tag } from 'antd';
import classNames from 'classnames/bind';
import { useMetadataContext } from '../contexts/MetaContext';
import { getListItemValue } from '@/utils/list';
import { useFormatMessage } from '@/utils/intlHelpers';
import PaneOperate from './PaneOperate';
import styles from '../styles/metadataPane.module.scss';
import EditDialog from '@/view/system/Metadata/components/dialogs/EditDialog';
import { IMetadata } from '@/interfaces/metadata';

const cx = classNames.bind(styles);

const { Column } = Table;

const MetadataPane = ({ title, data }: any) => {
  const formatMessage = useFormatMessage();
  const {
    metadataList,
    metadataLoading,
    nullList,
    duplicateList,
    typeList,
    kindList,
    deleteList,
    selectItems,
    setSelectedItem,
    initListQuery,
    deleteMetadataFunc
  } = useMetadataContext();

  const [currentPage, setCurrentPage] = useState(1);
  // 编辑数据
  const [editItem, setEditItem] = useState<IMetadata>(null);
  // 编辑弹窗展示状态
  const [editDialogVisible, setEditDialogVisible] = useState(false);

  useEffect(() => {
    initListQuery({ ...data });
    setCurrentPage(1);
  }, [data]);

  const showEditDialog = (data: IMetadata) => {
    setEditItem(data);
    setEditDialogVisible(true);
  };

  // 表格选项相关设置
  const onSelectChange = (selectedRowKeys: number[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedItem(selectedRowKeys);
  };
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const deleteItem = (item: any) => {
    deleteMetadataFunc({ fiRecordId: item.id });
  };

  return (
    <div className={cx('metadata-pane')}>
      <PaneOperate title={title} data={data} />
      <div className={cx('container')}>
        <Table
          dataSource={metadataList}
          loading={metadataLoading}
          rowKey="id"
          rowSelection={rowSelection}
          pagination={{
            current: currentPage,
            onChange: (page) => {
              setCurrentPage(page);
            }
          }}
          scroll={{
            x: 'max-content'
          }}
          bordered
        >
          <Column title="编号" dataIndex="id" key="id" align="center" />
          <Column title="字段描述" dataIndex="field_desc" key="c_name" align="center" />
          <Column title="字段名称" dataIndex="field_name" key="e_name" align="center" />
          <Column
            title="字段类型"
            dataIndex="field_type"
            key="field_type"
            align="center"
            render={(val) => <Tag color="blue">{getListItemValue(val, typeList)}</Tag>}
          />
          <Column
            title="字段种类"
            dataIndex="field_kind"
            key="field_kind"
            align="center"
            render={(val) => (
              <Tag color={getListItemValue(val, kindList, 'color')}>
                {getListItemValue(val, kindList)}
              </Tag>
            )}
          />
          <Column
            title="允许空"
            dataIndex="allowed_null"
            key="allowed_null"
            align="center"
            render={(val) => (
              <Tag color={getListItemValue(val, nullList, 'color')}>
                {getListItemValue(val, nullList)}
              </Tag>
            )}
          />
          <Column
            title="允许重复"
            dataIndex="allowed_dup"
            key="allowed_dup"
            align="center"
            render={(val) => (
              <Tag color={getListItemValue(val, duplicateList, 'color')}>
                {getListItemValue(val, duplicateList)}
              </Tag>
            )}
          />
          <Column title="长度" dataIndex="length" key="length" align="center" />
          <Column title="默认值" dataIndex="default_value" key="default_value" align="center" />
          <Column
            title="状态"
            dataIndex="deleted"
            key="deleted"
            align="center"
            render={(val) => (
              <Tag color={getListItemValue(val, deleteList, 'color')}>
                {getListItemValue(val, deleteList)}
              </Tag>
            )}
          />
          <Column
            title={formatMessage('tableAction')}
            key="action"
            align="center"
            render={(_text, record: IMetadata) => (
              <Space>
                {/* TODO：仅展示 #演示相关# */}
                <Button
                  type="link"
                  onClick={() => {
                    showEditDialog(record);
                  }}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  danger
                  // disabled={record.field_kind === 0}
                  onClick={() => {
                    deleteItem(record);
                  }}
                >
                  删除
                </Button>
              </Space>
            )}
          />
        </Table>
      </div>
      {useMemo(
        () =>
          editItem && (
            <EditDialog
              visible={editDialogVisible}
              data={editItem}
              onClose={() => {
                setEditDialogVisible(false);
              }}
            />
          ),
        [editDialogVisible]
      )}
    </div>
  );
};

export default MetadataPane;
